/*
 * @Author: your name
 * @Date: 2021-12-27 20:51:25
 * @LastEditTime: 2021-12-28 10:21:11
 * @LastEditors: LAPTOP-L472H14P
 * @Description: In User Settings Edit
 * @FilePath: \react-dnd-demo\src\Components\demo\SourceItem.js
 */
import React, { Component } from 'react'
import { DragSource } from 'react-dnd'

const departmentSource = {
  /**
   * @description: 开始拖拽触发函数
   * @param {*} props
   * @return {*}
   */  
  beginDrag(props) {
    return {
      ...props.item,
    }
  },
}
/**
 * @description: 将dragSource注入到组件中，实现拖拽关键
 * @param {*} connect
 * @return {*}
 */
function collect(connect) {
  return {
    connectDragSource: connect.dragSource(),
  }
}

class SourceItem extends Component {
  render() {
    const { item, connectDragSource } = this.props
    const style = {
      width: '100%',
      height: 40,
      lineHeight: '40px',
      border: '1px solid red',
      textAlign: 'center',
    }
    return connectDragSource(<div style={style}>{item.name}</div>)
  }
}
export default DragSource('box', departmentSource, collect)(SourceItem)
